<template>
  <div class="article-container">
    <el-card class="paddingContainer">
      <el-form :model="articleListInfo" ref="subjectQueryInfoRef">
        <el-form-item label="关键字" prop="kew">
          <el-input style="width: 200px" class="filter-item" placeholder="根据文章标题搜索" v-model="articleListInfo.keyword" clearable></el-input>
          <span>
            <label for="statusLabel" style="color: #606266; padding-left: 40px; padding-right: 10px">状态</label>
            <el-select clearable id="statusLabel" placeholder="请选择" v-model="articleListInfo.state">
              <el-option label="启用" :value="1"></el-option>
              <el-option label="禁用" :value="0"></el-option>
            </el-select>
          </span>
          <el-button class="filter-item" size="small" @click="clearInput">清除</el-button>
          <el-button class="filter-item" size="small" type="primary" @click="searchArticle">搜索</el-button>
          <el-button class="filter-item fr" size="small" style="margin-left: 10px" type="success" icon="el-icon-edit" @click="addArticleDialogVisible = true">新增技巧</el-button>
        </el-form-item>
      </el-form>
      <el-alert :title="alertText" type="info" class="alert" :closable="false" show-icon></el-alert>
      <!-- 文章列表区域 -->
      <el-table :data="articleDataList" style="width: 100%" :fit="true" highlight-current-row stripe>
        <el-table-column type="index" label="序号" width="80"></el-table-column>
        <el-table-column label="文章标题" width="400">
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <el-link :underline="false" v-if="scope.row.videoURL" class="el-icon-film" @click="playVideoDialog(scope.row.videoURL)"></el-link>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数"></el-table-column>
        <el-table-column prop="username" label="录入人" width="180"></el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <span>{{ scope.row.state ? '已启用' : '已禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="previewArticleInfo(scope.row)">预览</el-button>
            <el-button type="text" @click="stateChangeOnclick(scope.row)">{{ scope.row.state ? '禁用' : '启用' }}</el-button>
            <el-button type="text" :disabled="scope.row.state ? true : false" @click="showEditArticle(scope.row)">修改</el-button>
            <el-button type="text" :disabled="scope.row.state ? true : false" @click="removeArticle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="articleListInfo.page"
          :page-sizes="[3, 5, 8, 10]"
          :page-size="articleListInfo.pagesize"
          background
          layout="prev, pager, next,sizes, jumper"
          :total="total"
        ></el-pagination>
      </div>
      <!-- 新增对话框，富文本编辑器 -->
      <el-dialog class="article-quill" title="新增文章" :visible.sync="addArticleDialogVisible" width="50%" @close="clearArticleInput">
        <el-form ref="addArticleFormRef" :model="addFormData" label-width="100px">
          <el-form-item label="文章标题：" required>
            <el-input v-model="addFormData.title" placeholder="请输入文章标签"></el-input>
          </el-form-item>
          <el-form-item label="文章内容：" required>
            <quill-editor v-model="addFormData.articleBody" ref="articleQtuillEditorRef" :options="editorOption"></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址：">
            <el-input placeholder="请输入视频地址" v-model="addFormData.videoURL"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addArticleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addArticle">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改文章对话框 -->
      <el-dialog class="article-quill" title="修改文章" :visible.sync="editDialogVisible" width="50%">
        <el-form ref="editArticleFormRef" :model="editFormData" label-width="100px">
          <el-form-item label="文章标题：" required>
            <el-input v-model="editFormData.title" placeholder="请输入文章标签"></el-input>
          </el-form-item>
          <el-form-item label="文章内容：" required>
            <quill-editor v-model="editFormData.articleBody" ref="articleQtuillEditorRef" :options="editorOption"></quill-editor>
          </el-form-item>
          <el-form-item label="视频地址：">
            <el-input placeholder="请输入视频地址" v-model="editFormData.videoURL"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editArticleDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editArticle">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 播放视频 弹窗 -->
      <div v-bind:class="{ videoActive: isActive, videoWrapper: Show }" v-if="isActive">
        <div class="video-close-box">
          <div class="close-btn">
            <span class="el-icon-close" @click="closeVideo"></span>
          </div>
          <div class="video-box">
            <video :src="currentVideoURL" muted autoplay width="640" height="368" controls loop></video>
          </div>
        </div>
      </div>
      <!-- 预览弹窗 -->
      <el-dialog title="预览窗口" :visible.sync="previewArticledialogVisible" width="800px" class="previewarticle-dialog">
        <h2 class="article-title">{{ previewForm.title }}</h2>
        <div class="article-desc">
          <span>{{ previewForm.createTime | parseTimeByString('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          <span style="margin-left: 12px">{{ previewForm.username }}</span>
          <span>{{ previewForm.createID }}</span>
          <i class="el-icon-view"></i>
          <span>{{ previewForm.visits }}</span>
        </div>
        <div class="article-content" v-html="previewForm.articleBody"></div>
      </el-dialog>
    </el-card>
  </div>
</template>


<script>
import { list, changeState, add, update, remove, detail } from '@/api/hmmm/articles.js'
import { quillEditor } from 'vue-quill-editor' //引入富文本编辑器
import 'highlight.js/styles/monokai-sublime.css'

export default {
  name: 'article-com',
  components: {
    quillEditor
  },
  data() {
    return {
      alertText: '数据一共11条',
      articleListInfo: {
        page: 1, //页数
        pagesize: 10, // 每页多少条
        keyword: '', // 关键字
        state: null //状态
      },
      total: null, //分页总数
      articleDataList: [], //最大的列表的数据
      addArticleDialogVisible: false,
      addFormData: {
        //新增技巧 按钮
        title: '', //文章标题
        articleBody: '', // 文章内容
        videoURL: '' //视频地址
      },
      editorOption: {
        //富文本 整体内容 下面的自定义配置
        placeholder: '',
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗，斜体，下划线，删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序列表，无序列表
            ['blockquote'], // 引用，代码块
            ['code-block', 'image', 'link']
          ]
        }
      },
      editDialogVisible: false, // 关闭新增技巧的弹窗
      editFormData: {
        //修改 窗口的内容
        id: '',
        title: '',
        articleBody: '',
        videoURL: ''
      },
      currentVideoURL: null, //视频路径
      isActive: false, // 样式是否起作用
      Show: true,
      previewArticledialogVisible: false, //预览窗口的显示隐藏
      //预览文章的详情
      previewForm: {}
    }
  },
  //初始化数据(文章列表)
  created() {
    this.loadArticleList()
  },
  methods: {
    //获取数据
    async loadArticleList() {
      try {
        const { data } = await list(this.articleListInfo)
        // console.log(data);
        this.articleListInfo.keyword = this.articleListInfo.keyword.trim() //关键字赋值
        this.articleDataList = data.items //data里面的数组赋值
        this.total = data.counts //分页总条数 互相关联的还有 数据
        this.alertText = `数据一共有${this.total}条` //数据赋值
      } catch (err) {
        this.$message.error('获取面试技巧失败！') //接口获取失败抛出错误
      }
    },
    //分页
    handleSizeChange(val) {
      this.articleListInfo.pagesize = val
      this.loadArticleList() //调用获取最新数据接口
    },
    handleCurrentChange(val) {
      this.articleListInfo.page = val
      this.loadArticleList() //调用获取最新数据接口
    },
    // 搜索文章
    searchArticle() {
      this.loadArticleList() //调用获取最新数据接口
    },
    //清除
    clearInput() {
      this.articleListInfo.keyword = ''
      this.articleListInfo.state = null
      this.loadArticleList() //调用获取最新数据接口
    },
    // 新增或者添加文章
    async addArticle() {
      try {
        await add(this.addFormData)
        // 用户提示
        this.$message.success('新整文章成功!')
        this.loadArticleList() //调用获取最新数据接口
        this.addArticleDialogVisible = false
      } catch (err) {}
    },
    // 退出新增技巧清空编辑内容
    clearArticleInput() {
      this.addFormData.title = ''
      this.addFormData.articleBody = ''
      this.addFormData.videoURL = ''
    },
    //显示修改文章对话框
    showEditArticle(row) {
      // console.log(row);
      this.editDialogVisible = true
      this.editFormData.articleBody = row.articleBody
      this.editFormData.id = row.id
      this.editFormData.title = row.title
      this.editFormData.videoURL = row.videoURL
    },
    //启用禁用
    async stateChangeOnclick(row) {
      try {
        await changeState(row)
        // 用户成功
        this.$message.success('操作成功!')
        const index = this.articleDataList.findIndex((i) => i.id === row.id)
        //index是索引号 把当前每一行索引号和点击的id进行绑定
        // console.log(row);
        // console.log(index);
        // console.log(row.id);
        this.articleDataList[index].state = !row.state // 默认为true 就是启用 反之禁用
      } catch (err) {}
    },
    // 修改文章
    async editArticle() {
      try {
        await update(this.editFormData)
        // console.log(this.editFormData);
        this.$message.success('修改文章成功')
        this.editDialogVisible = false
        this.loadArticleList()
      } catch (err) {}
    },
    //删除文章
    removeArticle(id) {
      this.$confirm('此操作将永久删除该文章, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          // 调用接口
          await remove({ id: id })
          this.$message.success('删除操作成功！')
          this.loadArticleList()
        })
        .catch({})
    },
    // 预览
    previewArticleInfo(row) {
      this.previewArticledialogVisible = true
      // console.log(row)
      // 直接拿到每一行的数据,把row直接给this.previewForm
      this.previewForm = row
    },
    //视频
    playVideoDialog(url) {
      this.currentVideoURL = url
      this.isActive = true
    },
    //点击关闭
    closeVideo() {
      this.isActive = false
    }
  }
}
</script>

<style scoped lang='scss'>
.filter-item {
  margin-left: 10px;
}

//  el-card class="paddingContainer"
.el-card {
  margin: 10px;
}

.el-alert {
  margin-bottom: 15px;
}
.pagination {
  margin-top: 18px;
  margin-bottom: 18px;
  float: right;
}
.quill-editor {
  min-height: 150px;
}
::v-deep .ql-editor {
  min-height: 150px;
}
// .ql-container {
//   min-height: 250px;
// }
.dialog-footer {
  display: flex;
  justify-content: center;
}
.el-icon-film {
  color: blue;
  margin-left: 10px;
  font-size: 18px;
}
// 视频盒子样式
.videoWrapper {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  overflow: hidden;
  z-index: 9999;
  .video-close-box {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translate(-50%);
    width: 900px;
    height: 600px;
    .close-btn {
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%, 0);
      background: rgba(0, 0, 0, 0.4);
      box-shadow: 0 0 5px rgb(0 0 0 / 40%);
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-size: 20px;
    }
    .video-box {
      position: absolute;
      left: 50%;
      top: 100px;
      width: 640px;
      height: 368px;
      transform: translate(-50%);
    }
  }
}
//预览详情样式
.article-content {
  background-color: #f5f5f5;
  padding: 10px;
  word-break: break-all;
  min-height: 40px;
}
.article-title {
  margin-top: 5px;
}
::v-deep .el-dialog__body {
  padding: 20px 18px;
}
.previewarticle-dialog {
  min-width: 730px !important;
}
.article-desc {
  min-width: 730px;
  margin-bottom: 10px;
  .el-icon-view {
    margin: 0 10px;
  }
}
</style>
